; (function () {
    //             100/ 350=400/800  
    //1.  小区域=(大区域/大图)*小图
    //正比公式 大区域/小区域=大图/小图
    //    
    $.fn.extend({
        zoom() {
            let self = this;
            //比例
            let oScore = self.find(".bigArea").width() / self.find(".middleArea").width()

            //进入要显示
            this.on("mouseenter",'.middleImg',function () {
                self.find(".middleArea").show();
                self.find(".bigArea").show();
            }).on("mouseleave",'.middleImg', function () {
                self.find(".middleArea").hide();
                self.find(".bigArea").hide();
            })

            this.on("mousemove", ".middleImg",function (e) {

                let w = self.find(".bigArea").outerWidth() / self.find(".bigImg").outerWidth() * self.find(".middleImg").outerWidth();
                self.find(".middleArea").css("width", w);

                let h = self.find(".bigArea").outerHeight() / self.find(".bigImg").outerHeight() * self.find(".middleImg").outerHeight();
                self.find(".middleArea").css("height", h);

                var disX = e.pageX - self.find(".middleImg").offset().left - self.find(".middleArea").width() / 2;
                var disY = e.pageY - self.find(".middleImg").offset().top - self.find(".middleArea").height() / 2;
                if (disX <= 0) {
                    disX = 0
                }
                if (disY <= 0) {
                    disY = 0
                }

                var maxX = self.find(".middleImg").outerWidth() - self.find(".middleArea").outerWidth()
                var maxY = self.find(".middleImg").outerHeight() - self.find(".middleArea").outerHeight()
                if (disX > maxX) {
                    disX = maxX;
                }
                if (disY > maxY) {
                    disY = maxY;
                }


                self.find(".middleArea").css({
                    left: disX,
                    top: disY,
                })

                self.find(".bigImg").css({
                    left: oScore * disX * -1,
                    top: oScore * disY * -1,
                })

            })
        },
    
 
      

    })
})();


$(window).load(function () {
    var uId =JSON.parse(localStorage.getItem("datass"));
    console.log(uId['u_id']);
    if(uId['u_id']!=undefined){
        $('#btn-login em').text(uId['u_id'])
    }
    var id = location.search.split('?')[1].split('=')[1];
    console.log(id);
        $.ajax({
            url: `account/search/${id}`,
        }).then(function (item) {
            console.log(item);
            let strHtml = ``;
            let strHtml1 = ``;
            let strHtml2 = ``;
            var copyObj = Object.assign({}, item);
            delete copyObj.bigImgs;
            delete copyObj.middleImgs;
            delete copyObj.smallImgs;
            delete copyObj.Imgs;
            console.log(copyObj);

            strHtml += 
                            `   
                                <div class="middleImg"> <!-- 小图 -->
                                    <img src="${item.pic}" class="zhong" />
                                    <div class="middleArea"></div><!-- 小区域 -->
                                </div>
                                <div class="small">
                                    <ul>
                                        <li><img src="${item.smallImgs[0]}" /></li>
                                        <li><img src="${item.smallImgs[1]}" /></li>
                                        <li><img src="${item.smallImgs[2]}" /></li>
                                        <li><img src="${item.smallImgs[3]}" /></li>
                                    </ul>
                                </div>
                                <div class="bigArea"><!-- 大区域 -->
                                    <img class="bigImg" src="${item.pic}" /><!-- 大图 -->
                                </div>
        
                                
                                `
                        ;
            strHtml1 = `
            <div class="product-info-area">
            <div class="title">
                <p class="title-name">${item.pName}</p>
                <div class="title-li">
                        <span class="title-point">[花如其名 你心中永远的神]</span>
                    <span class="title-desc">洛神玫瑰99枝</span>
                </div>
            </div>
            <div class="price">
                <div class="price-item">
                    <span class="price-label" style="vertical-align:bottom;">售价</span>
                    <div class="price-box">
                        <span class="sell-price" id="sellPrice" style="opacity:1;">
                        ${item.pPrice}</span>
                        <div class="discount-tag-list">
                        </div>
                        <span class="original-price">市场价<span class="s-price" id="originalPrice">￥</span></span>
                    </div>
                    <div class="sale-count fr">已售<span>32</span>件</div>
                    <div style="padding-left: 80px;margin-top: 6px;">
                        <div class="discounts">
                            <div class="discounts-title">
                                <span class="middle">手机专享价</span>
                                <span id="wxappPrice"></span>
                            </div>
                        </div>
                        <div class="bought-code">
                            <span class="bought-code-icon"></span>
                            <span class="middle">去App购买</span>
                            <div class="qr-dropdown-item">
                                <img src="./image/wxguanjia_qrcode.png" width="108px" alt="">
                                <p>APP新人专享100元大礼包</p>
                            </div>
                        </div>
                        <div class="bought-code ">
                            <span class="bought-code-icon"></span>
                            <span class="middle">去微信购买</span>
                            <div class="qr-dropdown-item" style="bottom: -136px;">
                                <img id="wxmpQrCode" src="./image/wxguanjia_qrcode.png" width="108px" alt="">
                                <p>微信公众号快捷购买</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="price-time">
                    <span class="price-label">配送时间</span>
                    <div class="price-time-group">
                    </div>
                </div>
            </div>

            <div class="huayu">
                    <div class="huayu-item">
                        <span class="huayu-label">花语</span>
                        <p class="huayu-content">余生是你，不胜欢喜</p>
                    </div>
                <div class="huayu-item">
                    <span class="huayu-label">材料</span>
                    <p class="huayu-content">洛神玫瑰99枝</p>
                </div>
                    <div class="huayu-item">
                        <span class="huayu-label">包装</span>
                        <p class="huayu-content">白色小号英文插画纸（You are my love）10张、白色雪梨纸2张、粉色罗纹烫金丝带2米</p>
                    </div>
                                </div>
            <div class="delivery">
                <div class="delivery-item delivery-range">
                    <span class="delivery-label">配送说明</span>
                    <div class="delivery-content delivery-range-detail"><p>“精品鲜花”限送40个
                        城市的市区及近郊：北京、上海、广州、深圳、天津、重庆、大连、青岛、苏州、厦门
                        、宁波、温州、无锡、珠海、东莞、佛山，及其他省会城市（石家庄、太原、呼和浩特、
                        沈阳、长春、哈尔滨、南京、杭州、合肥、福州、南昌、济南、郑州、武汉、长沙、南宁、
                        海口、成都、贵阳、昆明、西安、兰州、银川、乌鲁木齐）</p>
                        <span class="icon icon-arrow"></span></div>
                </div>
                <div class="delivery">
                    <div class="delivery-item delivery-range">
                        <span class="delivery-label">配送至</span>
                        <div style="display: inline-block;">
                            <input type="text" name="" id="" placeholder="省份/市/区" readonly='readonly'>
                        </div>
                    </div>
                </div>
                <div class="delivery-item sku-product">
                    <span class="delivery-label">选择</span>
                    <div class="sku-list">
                        <div class="box clearfix">
                            <span>商品一</span>
                        </div>
                        <div class="box">
                            <span>商品二</span>
                        </div>
                        <div class="box">
                            <span>商品三</span>
                        </div>
                    </div>
                </div>
            </div>
           
            <div class="btn-group">
                <div class="btn-group-item">   
                    <button class="minus">-</button><input type="text" value="1" name="" id="number"><button class="add">+</button>
                </div>
                <button class="addcart" data-info='${JSON.stringify(copyObj)}'>加入购物车</button>
            </div>
            <div id="ajax_pricebox"></div>
        </div>
            
            
            
            
            
            `;
            strHtml2 = `
            
            <img src='${item.Imgs[0]} ' alt="">
            <img src='${item.Imgs[4]} ' alt="">
            <img src='${item.Imgs[1]} ' alt="">
            <img src='${item.Imgs[2]} ' alt="">
            <img src='${item.Imgs[3]} ' alt="">

            
            
            
            `
            $('.show-pic').html(strHtml2);
            $('.product-info').html(strHtml1);
            $('#box').html(strHtml);
         
        })
        
    $("#box").zoom()

    $('#service').on('mouseenter','.detail-service-tab-item',function () {
        let $index = $(this).index()
        $(this).addClass("active").siblings().removeClass(" active");
        $('.detail-service-content').children().eq($index).addClass("active").siblings().removeClass(" active")
    })
    $('.detail-hd-wp').on('click','.detail-hd-tab ',function () {
        let $index = $(this).index()
        $(this).addClass("active").siblings().removeClass(" active");
        $('.detail-itembigarea').removeClass("show")
        $('.detail-itembigarea').eq($index).addClass("show")
    })
    $("#box").on('click','.small ul li img',function () {
        let str = $(this).attr('src')
        $('.zhong').attr('src',str);
        $('.bigImg').attr('src',str)
    })
    // console.log($('.btn-group button').eq(0));
    $('.product-info').on('click','.btn-group .minus',function () {
        if($('.btn-group #number').val()<=0){
            return 
        }
        $('.btn-group #number').val($('.btn-group #number').val()-1)
    })
    $('.product-info').on('click','.btn-group .add',function () {
        $('.btn-group #number').val(parseInt($('.btn-group #number').val())+1)
    })

    $('.product-info').on('click', '.addcart', function () {
        //获取购买
        let u_Id = JSON.parse(localStorage.getItem('datass') || '{}').u_id;
        console.log(u_Id);
        let number = $('.product-info').find('#number').val();
        console.log(number);
        console.log($(this).data('info'));
        let oList = Object.assign($(this).data('info'), { u_Id, number });
        console.log(oList);
        $.ajax({
            url: '/account/addCart',
            type: 'post',
            data: oList,
        }).then(function (res) {
            console.log(res);
            layer.msg(res.msg);
        })
    })
   
})
